<template>
	<view>
		<scroll-view @scrolltolower="scrolltolower" lower-threshold="10" :scroll-y="initialIsSticky" :style="{ height: props.scrollViewHeight + 'px' }">
			<view class="">
				<view class="tab">
					<view class="tab_flex">
						<view
							class="items"
							:class="index == data.active ? 'actitems' : ''"
							:style="{ width: itemWidth }"
							v-for="(item, index) in data.tabbarList"
							:key="index"
							@click="tabbarChange(index)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="top_img flex_jc_cent" @click="godraft" v-if="data.active == 0">
					<view class="flex">
						<image src="/static/cg.png" mode=""></image>
						本地草稿
					</view>
				</view>

				<view class="content" v-if="tabbar.active == 0">
					<view class="take_item" @click="goInfo" v-for="item in 5">
						<view class="img_flex">
							<image class="uimg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c1.png" mode="aspectFill"></image>
							<view class="img_right">
								<view class="take_user flex_jc_sb">
									<view class="u_l flex">
										<view class="flex_r">
											<view class="t1">小草莓(＾－＾)V</view>
											<view class="t2">2025/10/21</view>
										</view>
									</view>
									<view class="u_r flex_jc_cent">
										<view class="flex">
											<image src="/static/tt.png" mode=""></image>
											<view class="">已置顶</view>
										</view>
									</view>
								</view>
								<view class="texts">
									<view class="title">收获满满的一天：线下《西游行》</view>
									<view class="t_content">
										刚结束一场酣畅淋漓的“西游”之旅！线下读书会真的太棒了
										以前只觉得是光怪陆离的神魔故事，今天和书友们一聊才发现，取经路也是人生的修行路。我们每个人...刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的
									</view>
								</view>
								<view class="imglist">
									<view class="img_item" v-for="item in 4">
										<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
										<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
									</view>
								</view>

								<view class="comment">
									<view class="ts">
										<text>超大杯可乐：</text>
										东方奇幻文学的巅峰之作，一生必读的经典一生必读的经典
									</view>
									<view class="c_imglist">
										<view class="img_item" v-for="item in 2">
											<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
											<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
										</view>
									</view>
								</view>

								<view class="hd flex">
									<image src="/static/q.png" mode=""></image>
									<view class="tt">啊实打实大阿斯顿啊实打实大阿斯顿啊实打实大阿斯顿啊实打实大阿斯顿</view>
								</view>
							</view>
						</view>
						<view class="handle_block flex">
							<view class="switch-wrapper">
								<switch checked="true" @change="" color="#D8C6A7"><view style="margin-left: 10rpx">上架</view></switch>
							</view>
							<view class="switch-wrapper">
								<switch checked="true" @change="" color="#D8C6A7"><view style="margin-left: 10rpx">评论</view></switch>
							</view>
						</view>
					</view>
				</view>
				<view class="content" v-if="tabbar.active == 1">
					<view class="take_item" @click="goInfo" v-for="item in 2">
						<view class="img_flex" style="border: none">
							<image class="uimg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c1.png" mode="aspectFill"></image>
							<view class="img_right">
								<view class="take_user flex_jc_sb">
									<view class="u_l flex">
										<view class="flex_r">
											<view class="t1">小草莓(＾－＾)V</view>
											<view class="t2">2025/10/21</view>
										</view>
									</view>
									<view class="u_r flex_jc_cent">
										<view class="flex">
											<image src="/static/tt.png" mode=""></image>
											<view class="">已置顶</view>
										</view>
									</view>
								</view>
								<view class="texts">
									<view class="title">收获满满的一天：线下《西游行》</view>
									<view class="t_content">
										刚结束一场酣畅淋漓的“西游”之旅！线下读书会真的太棒了
										以前只觉得是光怪陆离的神魔故事，今天和书友们一聊才发现，取经路也是人生的修行路。我们每个人...刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的
									</view>
								</view>
								<view class="imglist">
									<view class="img_item" v-for="item in 4">
										<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
										<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
									</view>
								</view>

								<view class="comment">
									<view class="ts">
										<text>超大杯可乐：</text>
										东方奇幻文学的巅峰之作，一生必读的经典一生必读的经典
									</view>
									<view class="c_imglist">
										<view class="img_item" v-for="item in 2">
											<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
											<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
										</view>
									</view>
								</view>

								<view class="hd flex">
									<image src="/static/q.png" mode=""></image>
									<view class="tt">啊实打实大阿斯顿啊实打实大阿斯顿啊实打实大阿斯顿啊实打实大阿斯顿</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content" v-if="tabbar.active == 2">
					<view class="take_item" @click="goInfo" v-for="item in 3">
						<view class="img_flex" style="border: none">
							<image class="uimg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c1.png" mode="aspectFill"></image>
							<view class="img_right">
								<view class="take_user flex_jc_sb">
									<view class="u_l flex">
										<view class="flex_r">
											<view class="t1">小草莓(＾－＾)V</view>
											<view class="t2">2025/10/21</view>
										</view>
									</view>
									<view class="u_r flex_jc_cent">
										<view class="flex">
											<image src="/static/tt.png" mode=""></image>
											<view class="">已置顶</view>
										</view>
									</view>
								</view>
								<view class="texts">
									<view class="title">收获满满的一天：线下《西游行》</view>
									<view class="t_content">
										刚结束一场酣畅淋漓的“西游”之旅！线下读书会真的太棒了
										以前只觉得是光怪陆离的神魔故事，今天和书友们一聊才发现，取经路也是人生的修行路。我们每个人...刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的刚结束一场酣畅淋漓的
									</view>
								</view>
								<view class="imglist">
									<view class="img_item" v-for="item in 4">
										<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
										<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
									</view>
								</view>

								<view class="comment">
									<view class="ts">
										<text>超大杯可乐：</text>
										东方奇幻文学的巅峰之作，一生必读的经典一生必读的经典
									</view>
									<view class="c_imglist">
										<view class="img_item" v-for="item in 2">
											<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
											<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
										</view>
									</view>
								</view>

								<view class="hd flex">
									<image src="/static/q.png" mode=""></image>
									<view class="tt">啊实打实大阿斯顿啊实打实大阿斯顿啊实打实大阿斯顿啊实打实大阿斯顿</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content" v-if="tabbar.active == 3">
					<view class="take_item" @click="goInfo">
						<view class="img_flex" style="border: none">
							<image class="uimg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c1.png" mode="aspectFill"></image>
							<view class="img_right">
								<view class="take_user flex_jc_sb">
									<view class="u_l flex">
										<view class="flex_r">
											<view class="t1">小草莓(＾－＾)V</view>
											<view class="t2">2025/10/21</view>
										</view>
									</view>
								</view>
								<view class="texts">
									<view class="take_text">刚结束一场酣畅淋漓的“西游”之旅！线下读书会真的太棒了 以前只觉得是光怪陆离的神魔故事</view>
								</view>
								<view class="imglist">
									<view class="img_item" v-for="item in 4">
										<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
										<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
									</view>
								</view>
								<!-- 评论别人类型 -->
								<!-- 删除帖子 和关闭评论优先 -->
								<view class="">
									<!-- 	<view class="comment">
										<view class="ts">
											<text>超大杯可乐：</text>
											东方奇幻文学的巅峰之作，一生必读的经典一生必读的经典
										</view>
										<view class="c_imglist">
											<view class="img_item" v-for="item in 2">
												<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
												<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
											</view>
										</view>
									</view> -->
									<view class="take_tips">该帖子评论区已关闭</view>
									<view class="take_tips">该帖子已下架</view>
									<view class="take_title flex_jc_sb">
										<view class="t_l">东方奇幻文学的巅峰之作东方奇幻文学的巅峰之作东方奇幻文学的巅峰之作</view>
										<uni-icons type="right" color="#979797"></uni-icons>
									</view>
									<view class="take_img flex_jc_sb">
										<view class="flex">
											<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c1.png" mode="aspectFill"></image>
											<view class="flex_r">
												<view class="t1">收获满满的一天：线下《西游行》</view>
												<view class="t2">#活动的名称</view>
											</view>
										</view>
										<uni-icons type="right" color="#979797"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="take_item" @click="goInfo">
						<view class="img_flex" style="border: none">
							<image class="uimg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c1.png" mode="aspectFill"></image>
							<view class="img_right">
								<view class="take_user flex_jc_sb">
									<view class="u_l flex">
										<view class="flex_r">
											<view class="t1">小草莓(＾－＾)V</view>
											<view class="t2">2025/10/21</view>
										</view>
									</view>
								</view>
								<view class="texts">
									<view class="take_text">刚结束一场酣畅淋漓的“西游”之旅！线下读书会真的太棒了 以前只觉得是光怪陆离的神魔故事</view>
								</view>
								<view class="imglist">
									<view class="img_item" v-for="item in 4">
										<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
										<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
									</view>
								</view>
								<!-- 评论别人类型 -->
								<view class="comment">
									<view class="ts">
										<text>超大杯可乐：</text>
										东方奇幻文学的巅峰之作，一生必读的经典一生必读的经典
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content" v-if="tabbar.active == 4">
					<view class="take_item" @click="goInfo">
						<view class="img_flex" style="border: none">
							<image class="uimg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c1.png" mode="aspectFill"></image>
							<view class="img_right">
								<view class="take_user flex_jc_sb">
									<view class="u_l flex">
										<view class="flex_r">
											<view class="t1">小草莓(＾－＾)V</view>
											<view class="t2">2025/10/21</view>
										</view>
									</view>
								</view>
								<view class="texts">
									<view class="take_text">
										<span>回复你：</span>
										<!-- <span>评论你：</span> -->
										刚结束一场酣畅淋漓的“西游”之旅！线下读书会真的太棒了 以前只觉得是光怪陆离的神魔故事
									</view>
									<view class="take_text">赞了你的帖子</view>
								</view>
								<view class="imglist">
									<view class="img_item" v-for="item in 4">
										<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
										<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
									</view>
								</view>
								<!-- 评论别人类型 -->
								<!-- 删除帖子 和关闭评论优先 -->
								<view class="">
									<view class="comment">
										<view class="ts">
											<text>超大杯可乐：</text>
											东方奇幻文学的巅峰之作，一生必读的经典一生必读的经典
										</view>
										<view class="c_imglist">
											<view class="img_item" v-for="item in 2">
												<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c2.png" mode="aspectFill"></image>
												<view class="item_ads flex_jc_cent" v-if="item == 4">2 +</view>
											</view>
										</view>
									</view>
									<view class="take_title flex_jc_sb">
										<view class="t_l">东方奇幻文学的巅峰之作东方奇幻文学的巅峰之作东方奇幻文学的巅峰之作</view>
										<uni-icons type="right" color="#979797"></uni-icons>
									</view>
									<view class="take_img flex_jc_sb">
										<view class="flex">
											<image src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/c1.png" mode="aspectFill"></image>
											<view class="flex_r">
												<view class="t1">收获满满的一天：线下《西游行》</view>
												<view class="t2">#活动的名称</view>
											</view>
										</view>
										<uni-icons type="right" color="#979797"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 		<view class="kong">
					<image src="/static/k4.png" mode=""></image>
					<view class="text">暂无数据</view>
				</view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { getActivityList, removeActivity } from '@/api/activity.js';
import { toast, showConfirm } from '@/utils/common.js';

const data = reactive({
	tabbarList: [
		{
			name: '发布'
		},
		{
			name: '收藏'
		},
		{
			name: '点赞'
		},
		{
			name: '评论'
		},
		{
			name: '回复和赞'
		}
	],
	active: 0,
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		url: '',
		pageNum: 1,
		pageSize: 10
	}
});
const itemWidth = computed(() => {
	return `${100 / tabbar.tabbarList.length}%`;
});
const tabbarChange = (e) => {
	tabbar.active = e;
};
const goInfo = () => {
	uni.navigateTo({
		url: '/pages/community/info'
	});
};
const godraft = () => {
	uni.navigateTo({
		url: '/mypage/usertabbar/communitydraft'
	});
};
const props = defineProps({
	initialIsSticky: {
		type: Boolean,
		default: false
	},
	scrollViewHeight: {}
});

const scrolltolower = () => {
	uni.showToast({
		title: '加载了'
	});
};
</script>

<style lang="scss">
scroll-view ::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
.kong {
	width: 360rpx;
	margin: 128rpx auto;
	image {
		width: 360rpx;
		height: 232rpx;
	}
	.text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
		margin-top: 50rpx;
		text-align: center;
	}
}
.tab {
	width: 750rpx;
	height: 72rpx;
	background: #f3f0e8;
	position: sticky;
	z-index: 4;
	top: 0%;
	.tab_flex {
		display: flex;
		height: 72rpx;
		align-items: center;
		.items {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #717171;
			text-align: center;
		}
		.actitems {
			font-weight: bold;
			font-size: 24rpx;
			color: #75613e;
		}
	}
}
.top_img {
	width: 710rpx;
	height: 80rpx;
	background: #ece6d5;
	border-radius: 20rpx;
	margin: 0rpx auto;
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 24rpx;
	color: #75613e;
}
.content {
	width: 100%;
	margin: 20rpx auto;
	position: relative;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.take_item {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		.img_flex {
			display: flex;
			border-bottom: 1px solid #ededed;
			.uimg {
				display: block;
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
			}
		}
		.img_right {
			flex: 1;
			width: 0;
			margin-left: 14rpx;
			.take_user {
				.u_l {
					.flex_r {
						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #000000;
						}
						.t2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #8f8f8b;
						}
					}
				}
				.u_r {
					width: 124rpx;
					height: 44rpx;
					background: #ffffff;
					border-radius: 22rpx;
					border: 1px solid #b19561;
					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #b19561;
				}
			}
			.texts {
				.take_text {
					margin-top: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1b1b1b;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #1b1b1b;
					margin-top: 20rpx;
				}
				.t_content {
					margin-top: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1b1b1b;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 4; //几行就填几
					-webkit-box-orient: vertical;
				}
			}

			.imglist {
				margin-top: 20rpx;
				display: flex;
				.img_item {
					width: 142rpx;
					height: 142rpx;
					margin-right: 14rpx;
					position: relative;
					image {
						width: 142rpx;
						height: 142rpx;
						border-radius: 12rpx;
					}
				}
				.item_ads {
					width: 142rpx;
					height: 142rpx;
					position: absolute;
					top: 0%;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #ffffff;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 12rpx;
				}
			}
			.take_tips {
				margin-top: 20rpx;
				width: 596rpx;
				height: 70rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #1b1b1b;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				line-height: 70rpx;
			}
			.take_title {
				margin-top: 20rpx;
				width: 596rpx;
				height: 70rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				line-height: 70rpx;
				.t_l {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1b1b1b;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.take_img {
				margin-top: 20rpx;
				width: 596rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				image {
					width: 80rpx;
					height: 80rpx;
					background: #dfdfdf;
					border-radius: 8rpx;
				}
				.flex_r {
					margin-left: 16rpx;
					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #1b1b1b;
					}
					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #979797;
						margin-top: 15rpx;
					}
				}
			}
			.comment {
				margin-top: 20rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 18rpx 20rpx;
				box-sizing: border-box;
				.ts {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #1b1b1b;
					text {
						color: #979797;
					}
				}
				.c_imglist {
					margin-top: 20rpx;
					display: flex;
					.img_item {
						width: 130rpx;
						height: 130rpx;
						margin-right: 12rpx;
						position: relative;
						image {
							width: 130rpx;
							height: 130rpx;
							border-radius: 12rpx;
						}
					}
					.item_ads {
						width: 130rpx;
						height: 130rpx;
						position: absolute;
						top: 0%;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #ffffff;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 12rpx;
					}
				}
			}

			.hd {
				margin: 20rpx 0rpx;
				height: 52rpx;
				background: #eee8d8;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				padding: 0rpx 24rpx;
				line-height: 52rpx;
				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
				.tt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #75613e;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		.handle_block {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #75613e;
			margin-top: 8rpx;
		}
	}
	.takes_item {
	}
}
.switch-wrapper {
	/* 调整开关整体容器的对齐方式（可选） */
	display: flex;
	/* uni-app文字类名 */
	font-size: 36rpx !important; /* 固定文字大小 */
	transform: none !important; /* 取消文字继承的缩放 */
	/* 深度选择器穿透原生组件样式 */
	::v-deep wx-switch, /* 微信小程序 */
	::v-deep uni-switch {
		/* 其他平台 */
		/* 缩小开关的整体尺寸（通过transform缩放） */
		transform: scale(0.6); /* 0.8表示缩小到80%，可根据需要调整 */
		transform-origin: left center; /* 缩放原点左对齐，避免文字偏移 */
		display: flex;
		align-items: center;
	}
}
</style>